<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1 {
            position: relative;
            width: 600px;
            height: 300px;
            margin: 200px auto;
            background: url(../../../娱乐/做的玩/图片/佐助.jpg);
            transform: scale(1.4);
        }

        .box {
            position: absolute;
            left: 235px;
            top: 95px;
            width: 130px;
            height: 130px;
            border-radius: 50%;
            overflow: hidden;
        }

        li {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        li img {
            width: 100%;
            height: 100%;
        }

        li:nth-child(1) {
            animation: move10 20s backwards infinite;
        }

        li:nth-child(2) {
            animation: move9 20s backwards infinite;
        }

        li:nth-child(3) {
            animation: move8 20s backwards infinite;
        }

        li:nth-child(4) {
            animation: move7 20s backwards infinite;
        }

        li:nth-child(5) {
            animation: move6 20s backwards infinite;
        }

        li:nth-child(6) {
            animation: move5 20s backwards infinite;
        }

        li:nth-child(7) {
            animation: move4 20s backwards infinite;
        }

        li:nth-child(8) {
            animation: move3 20s backwards infinite;
        }

        li:nth-child(9) {
            animation: move2 20s backwards infinite;
        }

        li:nth-child(10) {
            animation: move 20s backwards infinite;
        }

        @keyframes move {
            0% {
                opacity: 1;
            }

            5% {
                transform: rotate(0deg);
                opacity: 1;
            }

            8% {
                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move2 {
            15% {
                transform: rotate(0deg);
                opacity: 1;
            }

            18% {

                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move3 {
            25% {
                transform: rotate(0deg);
                opacity: 1;
            }

            28% {
                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move4 {
            35% {
                transform: rotate(0deg);
                opacity: 1;
            }

            38% {
                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move5 {
            45% {
                transform: rotate(0deg);
                opacity: 1;
            }

            48% {
                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move6 {
            55% {
                transform: rotate(0deg);
                opacity: 1;
            }

            58% {
                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move7 {
            65% {
                transform: rotate(0deg);
                opacity: 1;
            }

            68% {
                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move8 {
            75% {
                transform: rotate(0deg);
                opacity: 1;
            }

            78% {
                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move9 {
            85% {
                transform: rotate(0deg);
                opacity: 1;
            }

            88% {
                transform: rotate(360deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move10 {
            95% {
                transform: rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: rotate(360deg);
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="a1">
        <div class="box">
            <ul>
                <li><img src="./写轮眼05.jpg" alt=""></li>
                <li><img src="./写轮眼09.jpg" alt=""></li>
                <li><img src="./写轮眼08.jpg" alt=""></li>
                <li><img src="./写轮眼07.jpg" alt=""></li>
                <li><img src="./写轮眼06.jpg" alt=""></li>
                <li><img src="./写轮眼05.jpg" alt=""></li>
                <li><img src="./写轮眼04.jpg" alt=""></li>
                <li><img src="./写轮眼03.jpg" alt=""></li>
                <li><img src="./写轮眼02.jpg" alt=""></li>
                <li><img src="./写轮眼01.jpg" alt=""></li>
            </ul>
        </div>
    </div>
</body>

</html>